/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" }, tabBar:{ index:3, "iconPath":
"/static/common/tabBar/d.png", "selectedIconPath": "/static/common/tabBar/d1.png", "text": "我的" } } */
<template>
	<view class="">
		<!-- pb170 -->
		<image class="bg-1" src="__ROOT__/common/images/my-bg.png" mode=""></image>

		<view class="con">
			<view class="bar" :style="{ height: customBar + 'px' }"></view>

			<u-navbar title="我的" title-color="#fff" :leftIcon="none" bgColor="transparent"
				leftIconColor="transparent"></u-navbar>


			<view class="user-info flex-lr-tbc">
				<view class="flex-tbc">
					<view class="heard flex-shrink">
						<image :src="userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
						<image src="__ROOT__/common/images/header-img.png" mode="aspectFill" v-else></image>
					</view>
					<!-- '__ROOT__/common/images/header-img.png' -->
					<view class="info">
						<view class="name">
							{{ userInfo.nickname || '' }}
						</view>
						<view class="phone">{{ userInfo.mobile || '' }}</view>
					</view>
				</view>

				<view class="setting-box flex-tbc justify-content_flex-end" @click="jumpSetting">
					<image class="setting" src="__DIR__/my/img/3.png" mode=""></image>
				</view>
			</view>
		</view>



		<view class="content">

			<view class="order mb20" v-if="userInfo.is_hx == 1">
				<view class="or-top flex-lr-tbc">
					<view class="name">核销员功能</view>
				</view>

				<view class="list-tab flex-rl">
					<view class="item flex_1" v-for="item in HXTabList" :key="item.value" @click="onHXtab(item)">
						<image :src="item.icon" mode=""></image>
						<view class="text">{{ item.label }}</view>
					</view>
				</view>
			</view>

			<view class="order">
				<view class="or-top flex-lr-tbc">
					<view class="name">验车记录</view>

					<view class="more flex-tbc" @click="ontab('')">
						全部
						<image class="w18 h24" src="__ROOT__/common/images/row-r.png"></image>
					</view>
				</view>

				<view class="list-tab flex-rl">
					<view class="item flex_1" v-for="item in orderTabList" :key="item.value" @click="ontab(item)">
						<view class="image1 w71 h69 relative">
							<image :src="item.icon" mode=""></image>
							<view class="num" v-if="item.num > 0">{{ item.num }}</view>
						</view>
						<view class="text">{{ item.label }}</view>
					</view>
				</view>
			</view>

			<view class="order mt20" v-if="userInfo.is_yw == 1">
				<view class="or-top flex-lr-tbc">
					<view class="name">代付验车记录</view>

					<view class="more flex-tbc" @click="ontabDF('')">
						全部
						<image class="w18 h24" src="__ROOT__/common/images/row-r.png"></image>
					</view>
				</view>

				<view class="list-tab flex-rl">
					<view class="item flex_1" v-for="item in orderTabList1" :key="item.value" @click="ontabDF(item)">
						<view class="image1 w71 h69 relative">
							<image :src="item.icon" mode=""></image>
							<view class="num" v-if="item.num > 0">{{ item.num }}</view>
						</view>
						<view class="text">{{ item.label }}</view>
					</view>
				</view>
			</view>
		</view>


		<view class="fn-list mt26">
			<view class="item flex-tbc" v-for="item in fnList" :key="item.value" @click="onFn(item)">
				<image :src="item.icon" mode=""></image>

				<view class="title">
					{{ item.label }}
				</view>

				<view class="right flex-tbc">
					<u-icon size="12" name="arrow-right"></u-icon>
				</view>

				<button open-type="contact" class="btn-c" v-if="item.value == 6"></button>
			</view>
		</view>

		<tabbar name="/pages/main/my" :fixed='true' :isShowBaoxian="isShowBaoxian" />
	</view>
</template>
<script setup>
	import tabbar from '@/components/tabbar.vue'
	import {
		ref,
		onMounted
	} from 'vue'

	// import orderImage1 from '__IMG__/order-1.png'
	// import orderImage2 from '__IMG__/order-2.png'
	// import orderImage3 from '__IMG__/order-3.png'
	// import orderImage4 from '__IMG__/order-4.png'


	// import image1 from '__IMG__/f1.png'
	// import image2 from '__IMG__/f2.png'
	// import image3 from '__IMG__/f3.png'
	// import image4 from '__IMG__/f4.png'
	// import image5 from '__IMG__/f5.png'
	// import image6 from '__IMG__/f6.png'
	// import image7 from '__IMG__/f7.png'


	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const isShowBaoxian = ref(false)
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const userInfo = ref({})

	const jumpSetting = () => {
		uni.navigateTo({
			url: '/pages/mine/mine/info'
		})
	}

	const onFn = (item) => {
		if (!item.path) return
		uni.navigateTo({
			url: item.path
		});
	};

	const HXTabList = [{
			value: 1,
			label: '核销记录',
			icon: '__IMG__/hx1.png',
			num: 0
		},
		{
			value: 2,
			label: '扫码核销',
			icon: '__IMG__/hx2.png',
			num: 0
		},
		{},
		{}
	];


	const orderTabList = ref([{
			value: 1,
			label: '待支付',
			icon: '__IMG__/order-1.png',
			num: 0
		},
		{
			value: 2,
			label: '已预约',
			icon: '__IMG__/order-2.png',
			num: 0
		},
		{
			value: 3,
			label: '已完成',
			icon: '__IMG__/order-3.png',
			num: 0
		},
		{
			value: 4,
			label: '已取消',
			icon: '__IMG__/order-4.png',
			num: 0
		}
	])
	const orderTabList1 = ref([{
			value: 1,
			label: '待支付',
			icon: '__IMG__/order-1.png',
			num: 0
		},
		{
			value: 2,
			label: '已预约',
			icon: '__IMG__/order-2.png',
			num: 0
		},
		{
			value: 3,
			label: '已完成',
			icon: '__IMG__/order-3.png',
			num: 0
		},
		{
			value: 4,
			label: '已取消',
			icon: '__IMG__/order-4.png',
			num: 0
		}
	])

	const fnList = ref([])
	const fnList1 = [{
			value: 1,
			label: '车辆管理',
			icon: '__IMG__/f1.png',
			path: '/pages/charPages/charPages/list'
		},
		// {
		// 	value: 2,
		// 	label: '保险申请',
		// 	icon: '__IMG__/f2.png',
		// 	path: '/pages/mine/mine/bxApply'
		// },
		{
			value: 11,
			label: '收费标准',
			icon: '__ROOT__/common/images/che-3.png',
			path: '/pages/charPages/charPages/shoufen'
		},
		{
			value: 3,
			label: '我的优惠券',
			icon: '__IMG__/f3.png',
			path: '/pages/mine/mine/quan'
		},
		{
			value: 4,
			label: '常用地址',
			icon: '__IMG__/f4.png',
			path: '/pages/address/address/list'
		},
		{
			value: 5,
			label: '常见问题',
			icon: '__IMG__/f5.png',
			path: '/pages/question/question/list'
		},
		{
			value: 6,
			label: '联系客服',
			icon: '__IMG__/f6.png',
			path: ''
		},
		{
			value: 10,
			label: '关注公众号',
			icon: '__IMG__/f9.png',
			path: '/pages/mine/mine/guanzhu'
		},
		{
			value: 7,
			label: '关于我们',
			icon: '__IMG__/f7.png',
			path: '/pages/mine/mine/about'
		}
	];



	const ontab = (item = {}) => {
		let type = item.value || ''
		uni.navigateTo({
			url: '/pages/mine/mine/order?type=' + type
		});
	}

	const ontabDF = (item = {}) => {
		let type = item.value || ''
		uni.navigateTo({
			url: `/pages/mine/mine/order?type=${type}&isDF=1`
		});
	}

	const onHXtab = (item) => {
		if (item.value == 1) {
			uni.navigateTo({
				url: '/pages/mine/mine/jilu'
			});
		} else if (item.value == 2) {
			wx.scanCode({
				success: async (res) => {
					console.log(res, 'canshucanshucanshucanshucanshu')
					const canshu = decodeURIComponent(res.path);
					const id = canshu.substring(canshu.indexOf('oid=') + 4);

					const res1 = await $post('/index/order_hx', {
						oid: id
					})

					if (!res1) {
						uni.showModal({
							title: '',
							content: '核销成功',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#0f956e',
							complete() {

							}
						})
					} else {
						uni.showModal({
							title: '',
							content: res1.msg,
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#0f956e',
							complete() {

							}
						})
					}
				},


				fail: function(err) {
					console.error('扫码失败：', err);
				}
			})
		}
	}

	const getUserInfo = async () => {
		fnList.value = JSON.parse(JSON.stringify(fnList1))
		const res = await $post('/user/get_user')
		userInfo.value = res.info
		if (res.info.is_yw == 1) {
			const list = [{
					value: 8,
					label: '我的邀请码',
					icon: '__IMG__/f8.png',
					path: '/pages/mine/mine/myCode'
				},

				{
					value: 9,
					label: '我的团队',
					icon: '__IMG__/f7.png',
					path: '/pages/mine/mine/myTeam'
				}
			]
			const index = fnList.value.findIndex(item => item.value == 8)
			if (index == -1) {
				fnList.value = list.concat(fnList.value)
			}
			
			const envVersion = uni.getStorageSync('envVersion')
			
			if (envVersion == 'release') {
				const index1 = fnList.value.findIndex(item => item.value == 2)
				if (index1 == -1) {
					const index2 = fnList.value.findIndex(item => item.value == 1)
					
					fnList.value.splice(index2+1, 0, {
						value: 2,
						label: '保险申请',
						icon: '__IMG__/f2.png',
						path: '/pages/mine/mine/bxApply'
					})
				}

			}
			
		}

		orderTabList.value.map(item => {
			if (item.value == 1) {
				item.num = res.info.dzf > 99 ? '99' : res.info.dzf
			} else if (item.value == 2) {
				item.num = res.info.yyy > 99 ? '99' : res.info.yyy
			}
			// else if(item.value == 3) {
			// 	item.num = res.info.ywc > 99 ? '99' : res.info.ywc
			// }
		})

		if (userInfo.value.is_yw == 1) {

			orderTabList1.value.map(item => {
				if (item.value == 1) {
					item.num = res.info.w_dzf > 99 ? '99' : res.info.w_dzf
				} else if (item.value == 2) {
					item.num = res.info.w_yyy > 99 ? '99' : res.info.w_yyy
				}
			})

		}
	}


	Vue.onShow(() => {
		initPage()
		getUserInfo()
		const envVersion = uni.getStorageSync('envVersion')

		if (envVersion == 'release') {
			isShowBaoxian.value = true
			
		} else {
			isShowBaoxian.value = false
			// uni.hideTabBar({
			// 	index: 1
			// })
			// uni.switchTab({
			// 	url: '/pages/index/index'
			// })
		}
	})
	Vue.onLoad(() => {})
</script>
<style scoped lang='scss'>
	.bg-1 {
		width: 100%;
		height: 438rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.con {
		width: 100%;
		height: 438rpx;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}

	.user-info {
		padding-top: 60rpx;
		padding-left: 28rpx;
		padding-right: 40rpx;

		.heard {
			width: 126rpx;
			height: 126rpx;
			overflow: hidden;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			padding-left: 24rpx;

			.name {
				font-weight: 800;
				font-size: 40rpx;
				color: #fff;
				line-height: 56rpx;
			}

			.phone {
				font-weight: 400;
				font-size: 26rpx;
				color: #fff;
				line-height: 36rpx;
				margin-top: 2rpx;
			}
		}

		.setting {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.setting-box {
		width: 60rpx;
		height: 60rpx;
	}

	.content {
		width: 100%;
		padding-top: 32rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: #F5F5F5;
		margin-top: -44rpx;
		position: relative;
		z-index: 3;
	}

	.order {
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 26rpx 20rpx;

		.or-top {
			font-family: OPPOSans, OPPOSans;
			font-weight: bold;
			font-size: 30rpx;
			color: #292929;
			line-height: 40rpx;

			.more {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 40rpx;

				image {
					margin-left: 8rpx;
				}
			}
		}
	}

	.list-tab {
		margin-top: 32rpx;
		padding: 0 10rpx;


		.item {
			text-align: center;
			position: relative;

			.image1 {
				width: 71rpx;
				height: 69rpx;
				margin: 0 auto;
			}

			.num {
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				width: 30rpx;
				height: 30rpx;
				background: #FF0000;
				border-radius: 50%;
				font-family: FZLanTingHeiS-R-GB, FZLanTingHeiS-R-GB;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				text-align: center;
			}

			image {
				width: 71rpx;
				height: 69rpx;
				margin: 0 auto;
			}

			.text {
				font-family: FZLanTingHeiS-R-GB, FZLanTingHeiS-R-GB;
				font-weight: 400;
				font-size: 24rpx;
				color: #292929;
				line-height: 48rpx;
				text-align: center;
			}
		}
	}


	.fn-list {
		background-color: #fff;

		.item {
			height: 128rpx;
			padding: 0 42rpx;
			position: relative;

			.btn-c {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}

		image {
			width: 44rpx;
			height: 44rpx;
		}

		.title {
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 48rpx;
			margin-left: 28rpx;
		}

		.right {
			margin-left: auto;
			font-family: OPPOSans, OPPOSans;
			font-weight: 400;
			font-size: 24rpx;
			color: #bdbdbd;
			line-height: 48rpx;

			text {
				margin-right: 8rpx;
			}
		}
	}
</style>